<template>
  <div id="main" ref="mybox" style="width: 100vw;height: 40vh;"></div>
</template>
<script>
  import Vue from 'vue'
  import Component from 'class-component'
  import ECharts from 'echarts'

  @Component({
    props: {
      chartData: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    watch: {
      'chartData': function () {
        this.setOptions()
      }
    }
  })
  export default class MultipleYLineChart extends Vue {
    chart = null
    setOptions () {
      this.chart.setOption({
        title: {
          show: false
        },
        legend: {
          data: [
            {
              name: '票房',
              icon: 'bar'
            },
            {
              name: '人次',
              icon: 'bar'
            }
          ],
          textStyle: {
            color: 'rgb(255, 192, 0)',
            fontSize: 16
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow', // shadow阴影指示器
            shadowStyle: {
              opacity: 0
            }
          }
        },
        grid: {
          left: '0',
          right: '3%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.chartData.labels,
          axisLabel: {
            color: 'rgb(255, 192, 0)'
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '票房',
            nameTextStyle: {
              color: 'rgb(255, 192, 0)'
            },
            nameLocation: 'end',
            axisLabel: {
              color: 'rgb(255, 192, 0)'
            },
            splitLine: {
              show: false
            }
          },
          {
            type: 'value',
            name: '人次',
            nameTextStyle: {
              color: 'rgb(255, 192, 0)'
            },
            nameLocation: 'end',
            axisLabel: {
              color: 'rgb(255, 192, 0)'
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: this.chartData.series
      })
    }
    mounted () {
      this.chart = ECharts.init(this.$refs.mybox)
    }
  }
</script>
